<template>
<div class="content user v-pull-to-refresh">
  <div class="banner">
    <div class="logo">
        <div class="logo_img">
            <img v-bind:src="userInfo.headimg" class="img-responsive" style="border:solid 1px #fff;border-radius: 50px;overflow:hidden;" width="64" height="64">
            <div style="color:white;line-height: 1;width:100px">{{userInfo.name}}</div>
        </div>
        <div class="logo_txt">
            <span class="yue">我的房卡数量</span>
            <span class="amount timer count-title" id="count-number" data-to="300" data-speed="500" data-decimals="0">{{userInfo.gems}}</span>
        </div>
        <div class="logo_id">
          <span class="yue">ID:</span>
          <span class="yue">{{userInfo.userid}}</span>
        </div>
        <!-- <div class="logo_leixing">
          <span class="yue">{{userInfo.role_name}}</span>
        </div> -->
        <div class="logo_invite">
          <span class="yue">邀请码:</span>
          <span class="yue">{{userInfo.invite_code}}</span>
        </div>
        <div class="logo_balance">
          <span class="yue">可提现:</span>
          <span class="yue">{{StaticData.balance}} 元 </span> 
        </div>
    </div>
    <!-- <div class="in">
        <div class="incomes">今日收入 100 积分</div>
        <div class="students">今日邀请 0 个</div>
    </div> -->
  </div>
  <nav class="bar bar-tab user-tab">
    <a class="tab-item">
      <!-- <span class="icon icon-shouyi"></span> -->
      <span class="tab-label">玩家数:</span>
      <span class="tab-label">{{StaticData.player}}</span>
    </a>
    <a class="tab-item" >
      <!-- <span class="icon icon-me"></span> -->
      <span class="tab-label">代理数:</span>
      <span class="tab-label">{{StaticData.agent}}</span>
    </a>

    
    <!-- <a class="tab-item" v-link="{ path: '/user/withdraw', replace: true}">
      <span class="icon icon-shouyimingxi"></span>
      <span class="tab-label">我要提现</span>
    </a> -->
  </nav>


    <nav class="bar bar-tab user-tab">
  

     <a class="tab-item">
      <!-- <span class="icon icon-shouyi"></span> -->
      <span class="tab-label">今日业绩:</span>
      <span class="tab-label">{{StaticData.todayBalance}} 元</span>
    </a>
    <a class="tab-item">
      <!-- <span class="icon icon-me"></span> -->
      <span class="tab-label">本周业绩:</span>
      <span class="tab-label">{{StaticData.weekBalance}} 元</span>
    </a>
    <!-- <a class="tab-item" v-link="{ path: '/user/withdraw', replace: true}">
      <span class="icon icon-shouyimingxi"></span>
      <span class="tab-label">我要提现</span>
    </a> -->
  </nav>
  <div class="list-block user-list">



    <ul>
      <li>
         <a class="item-content item-link" @click="editAgent()">
          <div class="item-media"><span class="icon icon-home"></sapn></div>
          <div class="item-inner">
            <div class="item-title">个人信息管理</div>
          </div>
        </a>
      </li>
    </ul>
    <ul>
      <li>
         <a class="item-content item-link" @click="goToDaili()">
          <div class="item-media"><span class="icon icon-tasks"></sapn></div>
          <div class="item-inner">
            <div class="item-title">代理管理</div>
          </div>
        </a>
      </li>
    </ul>
    <ul>
      <li>
        <a class="item-content item-link" @click="goToWanjia()">
        <div class="item-media"><span class="icon icon-star"></sapn></div>
        <div class="item-inner">
          <div class="item-title">玩家管理</div>
        </div>
        </a>
      </li>
    </ul>

  <ul>
      <li>
        <a class="item-content item-link" @click="goToClub()">
        <div class="item-media"><span class="icon icon-me"></sapn></div>
        <div class="item-inner">
          <div class="item-title">俱乐部管理</div>
        </div>
        </a>
      </li>
    </ul>

     <ul>
      <li>
        <a class="item-content item-link" @click="goToYeJi()">
        <div class="item-media"><span class="icon icon-mytask"></sapn></div>
        <div class="item-inner">
          <div class="item-title">业绩查询</div>
        </div>
        </a>
      </li>
    </ul>

   
    <ul>
      <li>
        <a class="item-content item-link"  v-link="{ path: '/invite', replace: true}">
        <div class="item-media"><span class="icon icon-invitefriend"></sapn></div>
        <div class="item-inner">
          <div class="item-title">代理推广</div>
        </div>
        </a>
      </li>
    </ul>
    <br>
  </div>
</div>
</template>

<script>
import _global from './global'
// import $ from 'zepto'
export default {
  data () {
    return {
      userInfo: {},
      StaticData: {},
      ua: '',
      userId: 0,
      roleId: 0,
      id: 0,
      code: -999
    }
  },
  ready () {
    this.getUserInfo()
    if (!this.isWeiXin()) {
      this.$router.go('/log/1000/1000')
      location.reload()
    }
  },
  methods: {
    isWeiXin () {
      this.ua = window.navigator.userAgent.toLowerCase()
      if (this.ua.match(/micromessenger/i) && this.ua.match(/micromessenger/i)[0] === 'micromessenger') {
        return true
      }
      return false
    },

    editAgent(){
       this.$router.go('/user/editAgent')
       location.reload()
    }, 
    goToDaili () {
      this.$router.go('/user/tasks')
      location.reload()
    },
    goToWanjia () {
      this.$router.go('/user/profile')
      location.reload()
    },

    goToClub(){

      this.$router.go('/user/club')
      location.reload()
    },

     goToYeJi () {
      this.$router.go('/user/yeji')
      location.reload()
    },
   
    getUserInfo () {
      let self = this
      if (this.$route.params.id) {
        window.localStorage.setItem('id', this.$route.params.id)
        // window.history.pushState({}, 0, '/')
      }
      if (!window.localStorage.getItem('id')) {
        window.location.href = _global.url + '/wxlogin'
        return
      }
      self.id = window.localStorage.getItem('id')
      this.$http.get(_global.url + '/getUserInfo?id=' + self.id).then(function(res) {
        if (typeof res.data === 'string') {
          res.data = JSON.parse(res.data)
        }
        self.userInfo = res.data.data
        if (res.data.errcode === -999) {
          // $.alert('未登录' + res.data.errcode)
          window.location.href = _global.url + '/wxlogin'
          return
        }
        window.localStorage.setItem('user_id', res.data.data.userid)
        window.localStorage.setItem('id', res.data.data.id)
        window.localStorage.setItem('role_id', res.data.data.role_id)
        window.localStorage.setItem('invite_code', res.data.data.invite_code)
        console.log('userInfo', res.data.data)
        self.getStaticData()
      }, function(res) {
        console.log(res)
      })
    },
    getStaticData () {
      let self = this
      if (window.localStorage.getItem('user_id')) {
        self.userId = parseInt(window.localStorage.getItem('user_id'), 0)
        self.roleId = parseInt(window.localStorage.getItem('role_id'), 0)
      }
      if (self.userId === 0) {
        console.log('userid:', self.userId)
      }
      this.$http.get(_global.url + '/getStaticData?userId=' + self.userId + '&id=' + self.id + '&role_id=' + self.roleId).then(function(res) {
        if (typeof res.data === 'string') {
          res.data = JSON.parse(res.data)
        }
        self.StaticData = res.data.data
        if (res.data.errcode === -999) {
          // this.$router.go('/')
          window.location.href = _global.url + '/wxlogin'
          return
        }
        console.log('staticdata', res.data.data)
      }, function(res) {
        console.log(res)
      })
    }
  }
}
</script>

<style>
.banner {
  width: 100%;
  background-color: white;
  padding: 12.7999992px;
}
.banner .logo {
  background-color: #ed8e07;
  border-radius: 10px;
  width: 100%;
  height: 140px;
  padding: 20.2666654px 21.333332px 5.333333px;
  box-shadow: 0 .0rem .8rem rgba(0,0,0,.3);
  margin-bottom: 0.3rem;
  position: relative;
}
.banner .logo .logo_img {
  margin-top: 0px;
  width: 58.666663px;
  height: 58.666663px;
  display: inline-block;
}
.banner .logo .logo_txt {
  margin-top: -5px;
  float: right;
  text-align: right;
}
.banner .logo .logo_txt .yue {
  color: #ffffff;
  font-size: 15.999999px;
}
.banner .logo .logo_txt .amount {
    display: block;
    margin-top: -.6rem;
    color: #fff;
    font-size: 34.866664px;
    position: absolute;
    text-align: center;
    width: 5rem;
}
.banner .logo .logo_id{
  color:white;
  width:5rem;
  position:absolute;
  display:inline-block;
  top:0.8rem;
  left:5.3rem;
  font-size:15.999999px;
}
.banner .logo .logo_leixing{
  color:white;
  width:5rem;
  position:absolute;
  display:inline-block;
  top:2.1rem;
  left:5.3rem;
  font-size:15.999999px;
}
.banner .logo .logo_invite {
    color: #fff;
    width: 8rem;
    position: absolute;
    display: inline-block;
    top: 2.5rem;
    left: 5.3rem;
    font-size: 15.999999px;
}

.banner .logo .logo_balance {
    color: #fff;
    width: 8rem;
    position: absolute;
    display: inline-block;
    top: 4.5rem;
    left: 5.3rem;
    font-size: 15.999999px;
}
.banner .in {
  width: 100%;
  height: 37.333331px;
  margin-top: 11.7333326px;
}
.banner .in .incomes {
  display: inline-block;
  width: 44%;
  height: 37.333331px;
  border-radius: 8px;
  text-align: center;
  line-height: 37.333331px;
  color: #ffffff;
  font-size: 12.7999992px;
  background-color: #ed8e07;
}
.banner .in .students {
  float: right;
  width: 44%;
  height: 37.333331px;
  border-radius: 8px;
  text-align: center;
  line-height: 37.333331px;
  color: #ffffff;
  font-size: 12.7999992px;
  background-color: #ed8e07 ;
}
.user-tab {
  background: #efeff4;
  height: 2.5rem;
  position: relative;
}
.user-tab .tab-item {
  height: 2.5rem;
  background-color: white;
}
.user-tab:before {
  background-color: white;
}
.user-list {
  margin: .7rem 0;
  height: 2.9rem;
}
.user-list ul {
  height: 2.9rem;
  /*box-shadow: 0 .01rem 0 .03rem rgba(0,0,0,.3);*/
}
.user-list li a {
  height: 2.9rem;
}
.user-list li {
  margin-top: .7rem;
  height: inherit;
}
</style>
